<template>
	<!-- 保安端 -->
	<view class="head-info" >
		<view class="info-left" @click="hanldeScan">
			<view class="pen-box">
				<view class="pen-img invitation-img">
					<image src="@/static/icon/icon-16.png" mode=""></image>
				</view>
				<view class="pen-text">扫一扫</view>
			</view>
			<view class="tips">
				<view class="" style="white-space: nowrap;">
					扫码查看，访客预约申请
				</view>
				<view class="">进行放行确认</view>
			</view>
		</view>
		<view class="info-right">
			<view class="appointment" @click="hanldeToRecordAn(0)">
				<view class="app-img">
					<image src="@/static/icon/icon-3.png" mode=""></image>
				</view>
				<view class="Msg-box">
					<view class="app-title">预约管理</view>
					<view class="app-text">查看预约访问记录</view>
					<view class="numberMsg">
						{{totalNum}}
					</view>
				</view>
			</view>
			<view class="appointment" @click="hanldeToRecordVisitAn(0)">
				<view class="app-img-record">
					<image src="@/static/icon/icon-14.png" mode=""></image>
				</view>
				<view class="">
					<view class="app-title">访客记录</view>
					<view class="app-text">查看历史访问记录</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from "vue"
	import {
		$get,
		$post
	} from "@/utils/request.js"
	
	const totalNum = ref(0)
	const props = defineProps({
		aboutTotal: {
			type: Number,
			required: true,
			default: 0
		}
	})
	watch(
		() => props.aboutTotal,
		(newTotalVal) => {
			totalNum.value = newTotalVal
		}, {
			immediate: true
		}
	)
	
	// 扫描二维码
	const hanldeScan = () => {
		uni.scanCode({
			scanType: ['qrCode'],
			showAlbum: true,
			success: (res) => {
				uni.navigateTo({
					url: `/pages/scanResults/scanResults?itemStrCode=${encodeURIComponent(res.result)}`
				})
				uni.showToast({
					title: '扫码成功',
					icon: 'success'
				});
			},
			fail: (err) => {
				console.error('扫码失败：', err);
				uni.showToast({
					title: '扫码失败，请重试',
					icon: 'none'
				});
			}
		});
	}
	// 预约记录保安端 actIndex 代表标签栏激活下表
	const hanldeToRecordAn = (id) => {
		if (id !== null && id !== undefined && id !== '') {
			uni.setStorageSync('actIndex', id);
		}
		uni.switchTab({
			url: `/pages/record/record`
		})
	}
	
	const hanldeToRecordVisitAn = (id) => {
		if (id !== null && id !== undefined && id !== '') {
			uni.setStorageSync('actIndex', id);
		}
		uni.navigateTo({
			url: '/pages/VisitorLog/VisitorLog'
		})
	}
	
</script>

<style lang="scss">
	.head-info {
		width: 100%;
		height: 190px;
		display: flex;
		justify-content: space-between;

		.info-left {
			width: 50%;
			height: 100%;
			background-image: url('../../../../static/img/bg-1.png');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			border-radius: 15px;


			.pen-box {
				width: 100%;
				height: 100px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 6px;
				margin: 20px 0px;

				.invitation-img {
					position: relative;

					.number-invitation {
						position: absolute;
						right: -40%;
						top: -10%;
						width: 18px;
						height: 18px;
						text-align: center;
						line-height: 18px;
						border-radius: 50%;
						background-color: red;
						color: #fff;
						font-size: var(--font-12);
					}
				}



				.pen-img {
					width: 40px;
					height: 40px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.pen-text {
					color: var(--color-333);
					font-size: var(--font-18);
					font-weight: 600;
				}
			}

			.tips {
				width: 100%;
				color: var(--color-999);
				font-size: var(--font-12);
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0px 26px;
				box-sizing: border-box;
			}

		}

		.info-right {
			width: 47%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;






			.appointment,
			.qrCode {
				width: 100%;
				height: 46%;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
				display: flex;
				align-items: center;
				justify-content: space-around;
				gap: 6px;
				padding: 0px 10px;
				box-sizing: border-box;




				.app-img {
					width: 40px;
					height: 40px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.app-img-record {
					width: 40px;
					height: 36px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.Msg-box {
					position: relative;

					.numberMsg {
						position: absolute;
						right: 0;
						top: 0;
						width: 18px;
						height: 18px;
						text-align: center;
						line-height: 18px;
						border-radius: 50%;
						background-color: red;
						color: #fff;
						font-size: var(--font-12);
					}
				}

				.app-title {
					color: var(--color-333);
					font-size: var(--font-18);
					font-weight: 600;
				}

				.app-text {
					margin-top: 4px;
					color: var(--color-999);
					font-size: var(--font-12);
				}

			}
		}


	}
</style>
